<?php 

$_SESSION['current_face'] = rand(1, 126);
?>

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
	if (window.XMLHttpRequest)
		  {// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		  }
	else
		  {// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }
	xmlhttp.onreadystatechange=cfunc;
	xmlhttp.open("GET",url,true);
	xmlhttp.send();
}
function face_shape_vote($face_shape)
	{
	loadXMLDoc("functions/ajax_requests.php?shape=" + $face_shape, function()
	  {
		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		    {
			    new_score = xmlhttp.responseXML.getElementsByTagName('new_score')[0].firstChild.data;
			    new_face = xmlhttp.responseXML.getElementsByTagName('new_face')[0].firstChild.data;
			    document.getElementById("score").innerHTML = new_score;
			    document.getElementById("currentImage").src = "images/faces/" + new_face + ".jpg";
		    }
	  });
}
</script>
<table width="680" border="0" height="80" cellspacing="0"
	cellpadding="0" align="center">
	<tr>
		<td width="211" valign="top" align="left">
			<div class="scoreouter">
				<div class="scoreheading" id="scoreheading">score</div>
				<div class="score" id="score"><?php echo $_SESSION['score'];?></div>
			</div>
		</td>
		<td width="300"><div
				style="font-size: 26px; color: black; text-align: center; text-outline: 1px 1px red;">base
				training</div></td>
		</td>
		<td align="left" width="211" valign="top">
			<div class="timerouter">
				<div class="timerheading" id="timerheading">time</div>
				<div class="timer" id="timer" name="timer">1:30</div>
			</div>
		</td>
	</tr>
</table>

<table class="game_main" cellspacing="0" cellpadding="0" align="center">
	<tr>
		<td></td>
		<td width="330" height="40" valign="bottom" align="center">
			<div class="question">What is the person's face
				shape?</div>
		</td>
	</tr>
	<tr>
		<td width="276" align="center" valign="top" style="padding-left:20px">
			<div id="polaroid" class="polaroid">
				<table border="0" width="276" height="332" cellpadding="0"
					cellspacing="0">
					<tr>
						<td height="253" valign="top">
							<div style="height: 237px; vertical-align: top">
								<img id="currentImage" class="currentImage"
									src="images/faces/<?php echo $_SESSION['current_face'];?>.jpg"
									width="237" height="237">
							</div>
						</td>
					</tr>
					<tr>
						<td height="76" valign="top">
							<div class="polaroidstatus" id="statusLabel"></div>
						</td>
					</tr>
				</table>
			</div>
		</td>
		<td valign="top" width="390" align="center">
			<div class="face_shapes">
				<a href="Javascript:face_shape_vote('<?php echo $_SESSION["fs1"]?>');"><img src="images/face_shapes/<?php echo $_SESSION['fs1'];?>.png" 
					class="face_shape_btn" alt="<?php echo $_SESSION['fs1'];?>" /></a>
				<a href="Javascript:face_shape_vote('<?php echo $_SESSION["fs2"]?>');"><img src="images/face_shapes/<?php echo $_SESSION['fs2'];?>.png" 
					class="face_shape_btn" alt="<?php echo $_SESSION['fs2'];?>" /></a>
				<a href="Javascript:face_shape_vote('<?php echo $_SESSION["fs3"]?>');"><img src="images/face_shapes/<?php echo $_SESSION['fs3'];?>.png" 
					class="face_shape_btn" alt="<?php echo $_SESSION['fs3'];?>" /></a>
				<a href="Javascript:face_shape_vote('<?php echo $_SESSION["fs4"]?>');"><img src="images/face_shapes/<?php echo $_SESSION['fs4'];?>.png" 
					class="face_shape_btn" alt="<?php echo $_SESSION['fs4'];?>" /></a>
				<a href="Javascript:face_shape_vote('<?php echo $_SESSION["fs5"]?>');"><img src="images/face_shapes/<?php echo $_SESSION['fs5'];?>.png" 
					class="face_shape_btn" alt="<?php echo $_SESSION['fs5'];?>" /></a>
				<a href="Javascript:face_shape_vote('<?php echo $_SESSION["fs6"]?>');"><img src="images/face_shapes/<?php echo $_SESSION['fs6'];?>.png" 
					class="face_shape_btn" alt="<?php echo $_SESSION['fs6'];?>" /></a>
				<a href="Javascript:face_shape_vote('<?php echo $_SESSION["fs7"]?>');"><img src="images/face_shapes/<?php echo $_SESSION['fs7'];?>.png" 
					class="face_shape_btn" alt="<?php echo $_SESSION['fs7'];?>" /></a>
				<a href="Javascript:face_shape_vote('<?php echo $_SESSION["fs8"]?>');"><img src="images/face_shapes/<?php echo $_SESSION['fs8'];?>.png" 
					class="face_shape_btn" alt="<?php echo $_SESSION['fs8'];?>" /></a>
			</div>
		</td>
	</tr>

</table>